<template>
    <div class="app-container">
        <div class="filter-container">
            <el-button class="mb-10" type="primary" icon="el-icon-plus" @click="showEdit(null)">添加管理员</el-button>
        </div>

        <el-table :data="managers" border>
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="realname" label="真实姓名" width="180" />
            <el-table-column prop="username" label="登录名称" width="180" />
            <el-table-column prop="phone" label="手机号" width="180" />
            <!-- <el-table-column label="角色">
                <template slot-scope="scope">
                    <el-tag v-for="role in scope.row.roles" :key="role.id">{{ role.name }}</el-tag>
                </template>
            </el-table-column> -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="管理员信息" :visible.sync="visible" width="40%" :close-on-click-modal="false">
            <el-form :model="temp" label-width="100px">
                <el-form-item label="真实姓名">
                    <el-input v-model="temp.realname" />
                </el-form-item>
                <el-form-item label="登录名称">
                    <el-input v-model="temp.username" />
                </el-form-item>
                <el-form-item label="登录密码">
                    <el-input v-model="temp.password" type="password" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="temp.phone" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">保存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { getManagers, deleteManager, saveManager } from '@/api/admin'
    import { resetObject } from '@/utils'
    export default {
        name: 'Managers1',
        data() {
            return {
                visible: false,
                managers: [],
                // roles: ['超级管理员', '普通管理员'],
                temp: {
                    id: 0,
                    realname: '',
                    username: '',
                    phone: '',
                    password: '',
                    roles: ''
                }
            }
        },
        created() {
            this.getManagers()
        },
        methods: {
            getManagers() {
                getManagers().then(res => {
                    if (res.code === 200) {
                        this.managers = res.data
                    }
                })
            },
            showEdit(row) {
                this.visible = true
                if (row) {
                    this.temp = { ...row }
                } else {
                    this.temp = resetObject(this.temp)
                }
            },
            handleSave() {
                saveManager(this.temp).then(res => {
                    if (res.code === 200) {
                        this.$message.success('保存成功')
                        this.getManagers()
                        this.visible = false
                    }
                })
            },
            handleDelete(row) {
                this.$confirm('确认删除该管理员【' + row.name + '】吗', '警告').then(() => {
                    deleteManager(row.id).then(() => {
                        this.getManagers()
                        this.$message.success('删除成功')
                    })
                })
            }
        }
    }
</script>
